<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<title></title>
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/common/bootstrap-3.3.2/css/bootstrap.min.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/common/bootstrap-3.3.2/css/navbar-fixed-top.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/common/css/wcrm.css?504" />
	<script src="<%=request.getContextPath()%>/common/jquery-1.11.2.min.js?504"></script>
	<script src="<%=request.getContextPath()%>/common/bootstrap-3.3.2/js/bootstrap.min.js"></script>
	<script src="http://webapi.amap.com/maps?v=1.3&key=${wkey}&plugin=AMap.PolyEditor,AMap.Autocomplete,AMap.MouseTool,AMap.CircleEditor,AMap.PlaceSearch"></script>
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
	<div id="container" class="container" ></div>
	<div id="myPageTop">
	    <table>
	        <tr>
	        	<td>
	                <label>门店号：</label>
	            </td>
	            <td class="column2">
	                <label>按关键字搜索：</label>
	            </td>
	            
	        </tr>
	        <tr>
	         	<td>
	                <input type="text" id="storeNbr" >
	            </td>
	            <td class="column2">
	                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
	            </td>
	           
	        </tr>
	    </table>
	</div>
	
	<div class="button-group">
		<input type="button" class="button" value="开启编辑模式" onClick="init();"/>
	    <input type="button" class="button" value="确定" onClick="closeEditPolygon();"/>     
	    <input type="button" class="button" value="取消" onClick="clearEditPolygon();"/>     
	</div>
</body>
<script>

    var editorTool, map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13 //地图显示的缩放级别
    });

    var beginNum = 0;
    var clickListener ;
    var beginPoints;
    var beginMarks ;
    var polygonEditor;
    
    var str = '[{"lng":114.075401,"lat":22.553578},{"lng":114.057108,"lat":22.580516},{"lng":114.146436,"lat":22.570272},{"lng":114.001018,"lat":22.518964},{"lng":114.080926,"lat":22.525782}]';
    beginPoints = json2arr(str);
    if(beginPoints.length>=3){
        beginNum=beginPoints.length;
        updateFlag=true;
         var polygon = createPolygon(beginPoints);
         polygonEditor = createEditor(polygon);
    }
    
    $(function(){  
	    $('#txtKey').bind('keypress',function(event){  
	        if(event.keyCode == "13")      
	        {  
	            searchKey($('#txtKey').val());  
	        }  
	    });  
	});  
    
    function init(){
        beginPoints = [];
        beginMarks = [];
        beginNum = 0;
        polygonEditor = '';
        clickListener = AMap.event.addListener(map, "click", mapOnClick);
    }
    
    function mapOnClick(e) {

        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        if(beginNum == 3){
            AMap.event.removeListener(clickListener);
            var polygon = createPolygon(beginPoints);
            polygonEditor = createEditor(polygon);
            clearMarks();
        }
    };


    function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
        return polygon;
    }

    function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,'end',polygonEnd);
        return polygonEditor;
    }

    function closeEditPolygon(){
    	
    	if ($("#storeNbr").val() =="" ){
    		alert("请输入门店号");
    		return false;
    	}
    	
    	if(beginNum >=3){
    		polygonEditor.close();
    	}else{
    		alert("编辑模式下，请在地图上确定3KM配送范围，至少选定3个点");
    	}
    }

    function clearEditPolygon(){                
        map.clearMap();
        $("#storeNbr").val("");
        $("#tipinput").val("");
    }    

    function polygonEnd(e){
        
        var strify = JSON.stringify(e.target.getPath());
        console.log(strify);
        
        var storeNbr =$("#storeNbr").val();
        
        $.ajax({
    		url : g_rootPath + "/store/create_scope",
    		dataType : "json",
    		contentType : "application/json;charset=utf-8",
    		type : "POST",
    		data : JSON.stringify({"lnglatStr" : strify ,"storeNbr":storeNbr}),
    		success : function(data) {
    			if (data.error == 0) {
    				alert(data.msg);
    				clearEditPolygon();
    			}else{
    				alert(data.error+","+data.msg);
    			}
    		}
    	});
    }

    function clearMarks(){
        map.remove(beginMarks);
    }

    function json2arr(json){
        var arr = JSON.parse(json);
        var res = [];
        for (var i = 0; i < arr.length; i++) {
            var line = [];
            line.push(arr[i].lng);
            line.push(arr[i].lat);
            res.push(line);
        };
        return res;
    }


     //实例化点标记
    function addMarker(lnglat) {
        var marker = new AMap.Marker({
        	icon: g_rootPath+"/common/images/mark.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }
  
    var auto = new AMap.Autocomplete({input: "tipinput" });
    
    
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
            cmarker = new AMap.Marker({
                icon: g_rootPath+"/common/images/mark.png",
                position:e.poi.location	
            });
            cmarker.setMap(map);
        }
    }
    
</script>
</html>
